<template>
	<view>
		<view class="other_box"></view>
		<view class="header">
			<view class="">差旅费用报销</view>
			<view class="">总额：{{travelSum}}元</view>
		</view>
		<template>
			<view v-if="dataSource1 && dataSource1.length">
				<commonTable :columns="columns1" :dataSource="dataSource1">
					<span slot="billNo" slot-scope="billNo" style="color: #1E6FFF;" @click="onBillNo1(billNo.record)">{{billNo.text}}</span>
				</commonTable>
			</view>
			<u-empty v-else mode="data" icon="/static/empty/data.png" style="background: #FFFFFF; padding-bottom: 20rpx;"></u-empty>
		</template>
		<view class="other_box"></view>
		<view class="header">
			<view class="">工程进度付款单</view>
			<view class="">总额：{{engineeringSum}}元</view>
		</view>
		<template>
			<view v-if="dataSource2 && dataSource2.length">
				<commonTable :columns="columns2" :dataSource="dataSource2">
					<span slot="billNo" slot-scope="billNo" style="color: #1E6FFF;" @click="onBillNo1(billNo.record)">{{billNo.text}}</span>
				</commonTable>
			</view>
			<u-empty v-else mode="data"  icon="/static/empty/data.png" style="background: #FFFFFF; padding-bottom: 20rpx;"></u-empty>
		</template>
		<view class="other_box"></view>
		<view class="header">
			<view class="">其他费用报销</view>
			<view class="">总额：{{otherSum}}元</view>
		</view>
		<template>
			<view v-if="dataSource3 && dataSource3.length">
				<commonTable :columns="columns3" :dataSource="dataSource3">
					<span slot="billNo" slot-scope="billNo" style="color: #1E6FFF;" @click="onBillNo1(billNo.record)">{{billNo.text}}</span>
				</commonTable>
			</view>
			<u-empty v-else mode="data" icon="/static/empty/data.png" style="background: #FFFFFF; padding-bottom: 20rpx;"></u-empty>
		</template>
		<view class="other_box"></view>
		<view class="header">
			<view class="">绩效提取单</view>
			<view class="">总额：{{extractionSum}}元</view>
		</view>
		<template>
			<view v-if="dataSource4 && dataSource4.length">
				<commonTable :columns="columns4" :dataSource="dataSource4">
					<span slot="billNo" slot-scope="billNo" style="color: #1E6FFF;" @click="onBillNo1(billNo.record)">{{billNo.text}}</span>
				</commonTable>
			</view>
			<u-empty v-else mode="data" icon="/static/empty/data.png" style="background: #FFFFFF; padding-bottom: 20rpx;"></u-empty>
		</template>
	</view>
</template>

<script>
	import http from '@/utils/request/index.js'
	import specialHttp from '@/utils/request/specialIndex' // 特殊请求方式，直接返回res
	import commonTable from '@/components/commonTable.vue' // 特殊请求方式，直接返回res
	
	export default {
		components: {
			commonTable
		},
		props: {
			projectId: {
				type: [String, Number],
				default: '',
			}
		},
		data() {
			return {
				columns1: [
					{
						title:'单据编号',
						align:"center",
						dataIndex: 'billNo',
						scopedSlots: { customRender: 'billNo' },
						ellipsis: true
					},
					{
						title:'报销人',
						align:"center",
						dataIndex: 'proposerName',
						ellipsis: true
					},
					{
						title:'申请部门',
						align:"center",
						dataIndex: 'proposerDeptId_dictText',
						ellipsis: true
					},
					{
						title:'费用所属团队',
						align:"center",
						dataIndex: 'teamId_dictText',
						ellipsis: true
					},
					{
						title:'报销金额(元)',
						align:"center",
						dataIndex: 'reimbursementAmount',
						ellipsis: true
					},
					{
						title:'自驾公里数补助(元)',
						align:"center",
						dataIndex: 'kilometresAmount',
						ellipsis: true
					}
				],
				
				// 工程进度款
				columns2: [
						{
						title:'单据编号',
						align:"center",
						dataIndex: 'billNo',
						scopedSlots: { customRender: 'billNo' },
						ellipsis: true
					},
					{
						title:'报销人',
						align:"center",
						dataIndex: 'proposerName',
						ellipsis: true
					},
					{
						title:'申请部门',
						align:"center",
						dataIndex: 'proposerDeptId_dictText',
						ellipsis: true
					},
					{
						title:'费用所属团队',
						align:"center",
						dataIndex: 'teamId_dictText',
						ellipsis: true
					},
					{
						title:'报销金额(元)',
						align:"center",
						dataIndex: 'reimbursementAmount',
						ellipsis: true
					}
				],
				columns3: [
					{
						title:'单据编号',
						align:"center",
						dataIndex: 'billNo',
						scopedSlots: { customRender: 'billNo' },
						ellipsis: true
					},
					{
						title:'报销人',
						align:"center",
						dataIndex: 'proposerName',
						ellipsis: true
					},
					{
						title:'申请部门',
						align:"center",
						dataIndex: 'proposerDeptId_dictText',
						ellipsis: true
					},
					{
						title:'费用所属团队',
						align:"center",
						dataIndex: 'teamId_dictText',
						ellipsis: true
					},
					{
						title:'报销金额(元)',
						align:"center",
						dataIndex: 'reimbursementAmount',
						ellipsis: true
					}
				],
				columns4: [
					{
						title:'单据编号',
						align:"center",
						dataIndex: 'billNo',
						scopedSlots: { customRender: 'billNo' },
						ellipsis: true
					},
					{
						title:'报销人',
						align:"center",
						dataIndex: 'proposerName',
						ellipsis: true
					},
					{
						title:'申请部门',
						align:"center",
						dataIndex: 'proposerDeptId_dictText',
						ellipsis: true
					},
					{
						title:'费用所属团队',
						align:"center",
						dataIndex: 'teamId_dictText',
						ellipsis: true
					},
					{
						title:'报销金额(元)',
						align:"center",
						dataIndex: 'reimbursementAmount',
						ellipsis: true
					}
				],
				
				dataSource1: [],
				dataSource2: [],
				dataSource3: [],
				dataSource4: [],
				travelSum: 0,
				engineeringSum: 0,
				otherSum: 0,
				extractionSum: 0,
				mockData: ''
			}
		},
		watch: {
			projectId: {
				handler (val) {
					if (val) {
						this.initData()
					}
				},
				immediate: true
			}
		},
		methods: {
			// 获取列表
			async initData () {
				await this.initClearData()
				this.loadData1(1) // 差旅费报销
				this.loadData2(1) // 工程进度付款
				this.loadData3(1) // 其他费用报销
				this.loadData4(1)  // 绩效提取单
				this.sumBill() 

			},
			initClearData() {
				this.dataSource1 = [],
				this.dataSource2 = [],
				this.dataSource3 = [],
				this.dataSource4 = [],
				this.travelSum = 0
				this.engineeringSum = 0
				this.otherSum = 0
				this.extractionSum = 0
			},
			async sumBill () {
				let params = {
					projectId: this.projectId
				}
				http.get('/api/erp/project/report/erpProjectFinanceReimbursementReport/getSumGroupBil', params).then(res=>{
					if (res.success && res.result) {
						this.mockData = Object.keys(res.result).map(k => {
							if (k === '3') {
								this.travelSum = res.result[k]
							} else if (k === '2') {
								this.engineeringSum = res.result[k]
							} else if (k === '1') {
								this.otherSum = res.result[k]
							} else if (k === '4') {
								this.extractionSum = res.result[k]
							}
						})
					}
				})
			},
			async loadData1 () {
				var param = {
					projectId: this.projectId,
					billType: '3',
					column: 'checkTime',
					order: 'desc',
					pageSize: 100
				}
				http.get('/api/erp/project/report/erpProjectFinanceReimbursementReport/list', param).then(async res=>{
					if (res.success) {
						this.dataSource1 = res.result.records;
					}
				})
			},
			
			// 工程进度款
			loadData2 () {
				var param = {
					projectId: this.projectId,
					billType: '2',
					column: 'checkTime',
					order: 'desc',
					pageSize: 100
				}
				http.get('/api/erp/project/report/erpProjectFinanceReimbursementReport/list', param).then(async res=>{
					if (res.success) {
						this.dataSource2 = res.result.records;
					}
				})
			},
			
			// 其他费用报销
			loadData3 () {
				var param = {
					projectId: this.projectId,
					billType: '1',
					column: 'checkTime',
					order: 'desc',
					pageSize: 100
				}
				http.get('/api/erp/project/report/erpProjectFinanceReimbursementReport/list', param).then(async res=>{
					if (res.success) {
						this.dataSource3 = res.result.records;
					}
				})
			},
			
			// 绩效提取单
			loadData4 () {
				var param = {
					projectId: this.projectId,
					billType: '4',
					column: 'checkTime',
					order: 'desc',
					pageSize: 100
				}
				http.get('/api/erp/project/report/erpProjectFinanceReimbursementReport/list', param).then(async res=>{
					if (res.success) {
						this.dataSource4 = res.result.records;
					}
				})
			},
			
			// 点击差旅报销页面
			 onBillNo1 (record) {
				if(record.billType=='3'){ // 差旅费报销
					uni.navigateTo({
					  url: '/pages/reportFilesList/erpFinanceTravelReimbursementBillForm?id=' + record.id
					})
				}else if(record.billType=='2'){ // 工程进度付款
					uni.navigateTo({
					  url: '/pages/reportFilesList/erpProjectProgressPaymentApplicationBillForm?id=' + record.id
					})
				}else if(record.billType=='1'){ // 其他费用报销
					uni.navigateTo({
					  url: '/pages/reportFilesList/erpFinanceReimbursementBillForm?id=' + record.id
					})
				}else if (record.billType == '4') {  // 绩效提取单
					uni.navigateTo({
					  url: '/pages/reportFilesList/ErpAchievementsExtractionForm?id=' + record.id
					})
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
.other_box {
	margin-top: 20rpx;
}
.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 36rpx 16rpx 44rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F2F2F2;
		background-color: #FFFFFF;
		position: relative;
		font-size: 17px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;

		&::before {
			content: ''; // 必须
			position: absolute;
			left: 32rpx;
			top: 50%;
			transform: translate(0, -50%);
			width: 6rpx;
			height: 29rpx;
			background-color: #1e6fff;
		}
	}
.table-content{
	overflow: auto;
	background-color: #ffffff;
	padding: 20rpx 10rpx;
	.table{
		white-space: nowrap;
		.td{
			text-align: center;
			padding: 0 10rpx;
		}
		.th{
			text-align: center;
			padding: 0 10rpx;
		}
	}
}
</style>